<template>
  <div id="login-container">
    <el-card class="box-card" shadow="always">
      <template #header>
        <div class="card-header">
          <span>登录</span>
        </div>
      </template>
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
        <div class="title-container">
          <h3 class="title">{{ $t('plm.login.logIn') }}</h3>
        </div>
        <el-form-item prop="username">
          <el-input
            ref="userRef"
            v-model="loginForm.username"
            :placeholder="$t('plm.login.usernameTip')"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
            @input="getSearchResult"
          >
            <template #prefix>
              <svg-icon icon-class="user" />
            </template>
          </el-input>
        </el-form-item>

        <el-tooltip v-model="capsTooltip" :content="$t('plm.login.contentTip')" placement="right" manual>
          <el-form-item prop="password">
            <el-input
              :key="passwordType"
              ref="passwordRef"
              v-model="loginForm.password"
              :type="passwordType"
              :placeholder="$t('plm.login.pwdTip')"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter="handleLogin"
            >
              <template #prefix>
                <svg-icon icon-class="password" />
              </template>
              <template #suffix>
                <span class="show-pwd" @click="showPwd">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </template>
            </el-input>
          </el-form-item>
        </el-tooltip>
        <el-form-item prop="domainId">
          <el-select v-model="loginForm.domainId" placeholder="请选择对应的域">
            <el-option
              v-for="(item, index) in envList"
              :label="item.name"
              :value="item.oid"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          class="login-button"
          @click.prevent="handleLogin"
        >
          {{ $t('plm.login.logIn') }}
        </el-button>

        <div style="position:relative">
          <div class="tips" />
          <div class="tips" />
        </div>
      </el-form>
    </el-card>
      
  </div>
</template>

<script setup>
import {  onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { loginProvider } from '@/provider/login/loginProvider';
import { debounce } from 'lodash';

const route = useRoute();
const router = useRouter();

const { 
  loading,
  loginForm,
  loginRules,
  capsTooltip,
  userRef,
  loginRef,
  passwordRef,
  passwordType,
  checkCapslock,
  showPwd,
  login
} = loginProvider();

let otherQuery = reactive({});
let redirect = ref('');

let envList = reactive([]);

const handleLogin = async () => {
  const result = await login();
  console.log(result);
  // if (result) {
  console.log('router push');
  // router.push({ path: redirect || '/', query: otherQuery });
  // }
}

// 筛选出除redirect以外的指向
const getOtherQuery = (query) => {
  var obj = Object.keys(query);
  return obj.reduce && obj.reduce((acc, cur) => {
    if (cur !== 'redirect') {
      acc[cur] = query[cur];
    }
    return acc;
  }, {})
}

const getDomainList = async (userName) => {
  // const response = await this.$api.pdmapis.domain.getSystemDomainListByUserName({
  //   userName: userName
  // });
  // envList = response.data;
  // if(envList.length > 0){
  //   this.$nextTick(( )=> {
  //     this.formData.baseUrl = this.envList[0].oid
  //   })
  // } else {
  //   this.formData.baseUrl = ""
  // }
}

const getSearchResult = debounce(() => {
  
}, 800);



onMounted(() => {
  // console.log(userRef, loginRef);
  if (loginForm.username === '') {
    userRef.value.focus();
  } else if (loginForm.password === '') {
    passwordRef.value.focus();
  }
})

watch( 
  ()=>route,
  (newRoute)=> {
    const { query } = newRoute;
    if (query) {
      redirect = 'Dashboard';
      otherQuery = getOtherQuery(query);
    }
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
// @import '@/style/login.scss';
#login-container {
  background-image: url("@/assets/login-background.jpg");
  background-repeat: "no-repeat";
  background-size: "100% 100%";
  height: 100vh;

}
</style>

